<template>
  <!-- 资料列表 二级tab组件 -->
  <van-tabs
    v-model:active="secondActive"
    animated
    swipeable
    sticky
    offset-top="5rem"
    title-active-color="black"
    title-inactive-color="#777777"
    @click-tab="handelTitle"
  >
    <van-tab title="最新">
      <div class="list_box">
        <ProfileItem
          v-for="item in shortList"
          :key="item"
          :id="item"
          :profileType="item % 2 == 0 ? 'zip' : ''"
        />
      </div>
    </van-tab>
    <van-tab title="最热">基础专题</van-tab>
    <van-tab title="资料包">真题解析</van-tab>
  </van-tabs>
</template>

<script>
import ProfileItem from "./ProfileItem.vue";
import { ref } from "@vue/reactivity";
export default {
  components: { ProfileItem },
  setup() {
    const secondActive = ref(0);
    const shortList = ref([0, 1, 2, 3, 4]);
    const handelTitle = (e) => {
      console.log(e);
    };
    return { secondActive, shortList, handelTitle };
  },
};
</script>

<style lang="less" scoped>
:deep(.van-tabs__content) {
  padding: 0 0.5rem;
  box-sizing: border-box;
}

:deep(.van-tab) {
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.05rem;
}
.list_box {
  width: 100%;
  padding: 0.3rem;
  box-sizing: border-box;
}
</style>
